<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类页</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="./axios.js"></script>
</head>

<body>
    <div class="fix-title">
        <div class="back">&lt;</div>
        <span>商品列表</span>
        <div class="text"><a href="search.html">搜索</a></div>
    </div>
    <div class="cate-list-fix">
        <ul class="cate-list">
        </ul>
    </div>
    <div class="good-list">
        <ul id="good-data">
        </ul>

    </div>


    <script src="../个人设置/lib/axios.js"></script>
    <script>
        //设置根路径
        axios.defaults.baseURL = 'http://124.223.14.236:3001/api'
        //发送请求获取到数据
        async function getData() {
            const { data } = await axios.get('/goods/cate')

            document.querySelector('.cate-list').innerHTML =
                data.data.map(item => `<li id=${item.id}><a href="#">${item.name}</a></li>`).join('')

            const arrlis = document.querySelectorAll('.cate-list li')

            for (let i = 0; i < arrlis.length; i++) {
                arrlis[i].addEventListener('click', async function () {
                    localStorage.setItem('id', `${arrlis[i].id}`)
                    document.querySelector('.cate-list .active').classList.remove('active')
                    arrlis[i].classList.add('active')
                    //发送请求
                    const { data: { data: res } } = await axios.get('/goods/', {
                        params: {
                            id: arrlis[i].id,
                            cate_id: arrlis[i].id,
                        }
                    })
                    console.log(res)

                    document.querySelector('#good-data').innerHTML = res.list.map(item =>
                        `<li>
                                    <img src=${item.img} alt="">
                                    <h3>${item.title}</h3>
                                    <p>
                                        <span>￥${item.price}</span>
                                        <span>+</span>
                                    </p>
                        </li>`).join('')
                })
                if (arrlis[i].id === localStorage.getItem('id')) {
                    arrlis[i].classList.add('active')
                    //发送请求
                    const { data: { data: res } } = await axios.get(`/goods`, {
                        params: {
                            id: arrlis[i].id,
                            cate_id: arrlis[i].id,
                        }
                    })
                    console.log(res)
                    document.querySelector('#good-data').innerHTML = res.list.map(item =>
                        `<li>
                                    <img src=${item.img} alt="">
                                    <h3>${item.title}</h3>
                                    <p>
                                        <span>￥${item.price}</span>
                                        <span>+</span>
                                    </p>
                                </li>`).join('')
                }
            }
        }
        getData()
    </script>
</body>

</html>